<template>
  <div class="bar-chart-container">
    <div ref="barChart" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { debounce } from 'lodash-es';

export default {
  name: 'BarChart',
  data() {
    return {
      chart: null,
      resizeObserver: null,
      chartData: {
        xAxisData: [], // 横轴数据
        yAxisData: [], // 纵轴数据
      },
    };
  },
  props: ['echarts10Data'],
  watch: {
    echarts10Data: {
      handler(newData) {
        this.chartData.xAxisData = newData.map(item => item.drugInfo);
        this.chartData.yAxisData = newData.map(item => item.drugNum);
        this.updateChart();
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.initChart();
    this.debouncedResize = debounce(this.handleResize, 200);

    // 监听窗口变化
    window.addEventListener('resize', this.debouncedResize);

    // 使用 ResizeObserver 监听容器变化
    if (typeof ResizeObserver !== 'undefined') {
      this.resizeObserver = new ResizeObserver(this.debouncedResize);
      this.resizeObserver.observe(this.$refs.barChart);
    }
  },
  beforeDestroy() {
    // 清除监听
    window.removeEventListener('resize', this.debouncedResize);
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.barChart);
      this.updateChart();
    },
    updateChart() {
      if (!this.chart) return;

      const option = {
        title: {
          text: '商品TOP10',
          left: 'left',
          textStyle: {
            color: '#333',
            fontSize: 18
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '15%', // 为旋转的标签留出更多空间
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}',
          position: function (point, params, dom, rect, size) {
            const x = point[0];
            const chartWidth = size.viewSize[0];
            const tooltipWidth = dom.offsetWidth;

            let posX = x;
            if (x + tooltipWidth > chartWidth) {
              posX = chartWidth - tooltipWidth;
            } else if (x < 0) {
              posX = 0;
            }

            return [posX, 10];
          }
        },
        xAxis: {
          type: 'category',
          data: this.chartData.xAxisData,
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            color: '#333',
            rotate: 30,
            width: 60,
            overflow: 'truncate',
            formatter: function(value) {
              return value.length > 10 ? value.slice(0, 8) + '...' : value;
            }
          },
          axisTick: {
            alignWithLabel: true
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        series: [{
          name: '数量',
          type: 'bar',
          data: this.chartData.yAxisData,
          itemStyle: {
            color: '#409EFF'
          },
          emphasis: {
            itemStyle: {
              color: '#1d7dfa'
            }
          },
          barWidth: '30%',
          label: {
            show: true,
            position: 'top',
            formatter: '{c}'
          }
        }],
        animationDuration: 1000
      };

      this.chart.setOption(option, true);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>

<style scoped>
.bar-chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
</style>
